<template>
  <div>
    son ---{{ name }}年龄是{{ age }}岁在{{ address }} 他的对面是{{ person.name
    }}{{ person.adress }}
    <p>
      <button @click="btn">点我改变</button>
      <button @click="sendParent">传值给父组件</button>
    </p>
  </div>
</template>
<script>
export default {
  // <!-- 子组件通过props接收父组件传过来的值,普通类型 -->
  //   传过来是对象就正常点出里面的方法和属性
  //   props: ['name', 'age', 'address', 'person'] // 只适合普通的不需要限制类型的,比如age是要一个字符串
  props: {
    // 规定传递过来的是什么类型,数字传递时age要在父组件绑定
    name: String,
    age: Number,
    // 提供默认值的写法
    address: {
      type: String,
      default: '深圳' // 没有传数据的时候就有默认值
    },
    person: Object
  },
  //   更改父组件的值
  methods: {
    btn () {
      // 普通的值能改,但是不建议
      //   this.name = '芬达'

      // 这种通过原型的方式可以修改
      this.person.name = '益力多' // 引用类型,改里面的属性的值,可以,但是不建议直接更改引用类型,也就是下面这种方式

      // 这种是直接改对象,后面的地址什么都没有了,相当改了里面全部,只剩下一个name,虽然也能改但是不建议
      //   this.person = {
      //     name: '固力果'
      //   }
    },
    // 子组件传值给父组件,要触发自定义事件
    sendParent () {
      // 固定写法this.$emit('自定义事件名)
      this.$emit('myevent', [
        { id: 1001, name: '天天' },
        { id: 1002, name: '滴滴' }
        // 父组件会通过监听这个事件来接值@myevent='getevent'
      ])
    }
  }
}
</script>
